import React,{useState} from 'react';
import { Layout, Menu, Button,Modal } from 'antd';
import { Outlet, Link, useNavigate } from 'react-router-dom';
import logo from '../../assets/cbe769a523095d18c6c11252415cc065.jpg'; // 替换为你的 logo 路径
import './index.scss'
const { Header, Content, Sider } = Layout;

const PersonalPage = () => {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');

  
  const showModal = () => {
    setModalText('退出后需要重新登入，请谨慎点击。');
    setOpen(true);
    
  };
  const handleLogout = () => {
    setConfirmLoading(true);
    navigate('/login');
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 20000);
  };
  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };

  return (
    <Layout style={{ minHeight: '100vh' ,backgroundColor:'#f7f7fc'}}>
      {/* 顶部区域 */}
      <Header style={{  backgroundColor:'#ebe8e7',display: 'flex', justifyContent: 'space-between', alignItems: 'center',width:'100%',height:'45.8px' }}>
        <div>
        <Link to="/login">
          <img src={logo} alt="图书管理系统 logo" style={{ height: '80px'}} />
        </Link>
        </div>
        <div style={{display: 'flex',backgroundColor: '#ebe8e7',justifyContent: 'center', alignItems: 'center' }}>
        <Menu mode="horizontal" style={{ backgroundColor: '#ebe8e7' }} >
          <Menu.Item key="0"><Link to="/">首页</Link></Menu.Item>
          <Menu.Item key="1"><Link to="/">网络小说</Link></Menu.Item>
          <Menu.Item key="2"><Link to="/">科学</Link></Menu.Item>
          <Menu.Item key="3"><Link to="/">物理</Link></Menu.Item>
          {/* 添加更多分类 */}
          <Menu.Item key="4"><Link to="/">历史</Link></Menu.Item>
          <Menu.Item key="5"><Link to="/">文学</Link></Menu.Item>
          <Menu.Item key="6"><Link to="/">艺术</Link></Menu.Item>
          <Menu.Item key="7"><Link to="/">计算机</Link></Menu.Item>
          <Menu.Item key="8"><Link to="/">哲学</Link></Menu.Item>
        </Menu>
        </div>

        <div style={{ color: 'white' }}>
          欢迎，用户名
          <Button style={{ marginLeft: '16px' }} onClick={showModal}>退出</Button>
          <Modal 
            title="退出确认"
            open={open}
            onCancel={handleCancel}
            onOk={handleLogout}
            
            confirmLoading={confirmLoading}
            buttonPlacement="horizontal" 
            okButtonProps={{
              style: {
                backgroundColor: '#ff4d4f',
                borderColor: '#ff4d4f',
                color: 'white',
                width: '100px',
                height: '40px',
                // 可以添加更多样式属性
              }
            }}
             // 调整取消按钮样式
             cancelButtonProps={{
              style: {
                backgroundColor: '#ff4d4f',
                borderColor: '#d9d9d9',
                color: 'white',
                width: '100px',
                height: '40px',
                // 可以添加更多样式属性
              }
            }}
          >
            <p>{modalText}</p>
          </Modal>
        </div>
      </Header>
      <Layout>
        {/* 左侧组件按钮区域 */}
        <Sider width={200} height={500} style={{ backgroundColor:'#f7f7fc'}}>
          <Menu mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="person">个人信息</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="borrow-record">借阅信息</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        {/* 右侧路由切换区域 */}
        <Content style={{ padding: '24px', minHeight: 'calc(100vh - 64px)' }}>
        <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default PersonalPage;